


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>fuint会员营销管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        /* 移动端 */
        @media screen and (max-width: 768px) {
            .layui-layout-admin .layui-layout-left,
            .layui-layout-admin .layui-body,
            .layui-layout-admin .layui-footer{left: 0;}
            .layui-layout-admin .layui-side{left: -300px;}
        }
    </style>
</head>
<body>

        <!-- 内容主体区域 -->
        <div >
            <!-- 内容主体区域  面包屑-->
            <span class="layui-breadcrumb">
              <a href="index.html">首页</a>
              <a><cite>会员管理</cite></a>
              <a href="member.html">会员列表</a>
            </span>

            <!-- 水平线 -->
            <hr class="layui-bg-blue">

            <!-- 搜索条件 -->
            <fieldset class="layui-elem-field">
                <legend>筛选条件</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label" style="margin-top: 10px">会员ID</label>
                        <div class="layui-input-inline" style="margin-top: 10px">
                            <input type="text" id="search_member_ID" placeholder="请输入会员ID" class="layui-input">
                        </div>

                        <label class="layui-form-label" style="margin-top: 10px">手机号</label>
                        <div class="layui-input-inline" style="margin-top: 10px">
                            <input type="text" id="search_member_phone" placeholder="请输入手机号" class="layui-input">
                        </div>

                        <label class="layui-form-label" style="margin-top: 10px">名称</label>
                        <div class="layui-input-inline" style="margin-top: 10px">
                            <input type="text" id="search_member_name" placeholder="请输入名称" class="layui-input">
                        </div>

                        <label class="layui-form-label" style="margin-top: 10px">会员等级</label>
                        <div class="layui-input-inline" style="margin-top: 10px">
<!--                            <input type="text" id="search_member_grade" placeholder="请选择会员等级" class="layui-input">-->
                            <div class="layui-form" lay-filter="gradeDiv">
                                <select name="search_member_grade" id="search_member_grade" lay-filter="gradeSelect">
                                    <option value="">请选择</option>
                                    <option value="普通会员">普通会员</option>
                                    <option value="铜牌会员">铜牌会员</option>
                                    <option value="至尊会员">至尊会员</option>
                                </select>
                            </div>
                        </div>

                        <label class="layui-form-label" style="margin-top: 10px">状态</label>
                        <div class="layui-input-inline" style="margin-top: 10px">
                            <div class="layui-form" lay-filter="statusDiv">
                                <select name="search_member_grade" id="search_member_status" lay-filter="statusSelect">
                                    <option value="">请选择</option>
                                    <option value="1">启用</option>
                                    <option value="0">禁用</option>
                                </select>
                        </div>
                    </div>
<!--                    头部三个点击事件对应按钮-->
                    <div class="layui-form-item " >
                        <div class="layui-inline" style="margin-top: 20px;margin-bottom: -10px">
                            <button class="layui-btn layui-btn-primary " style="color: #009688" id="iReset">重置</button>
                            <button class="layui-btn" id="searchVal">搜索</button>
                            <button class="layui-btn layui-btn-primary" style="color: #0081FF" id="insertMember">新增</button>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
<!--            数据表格-->
            <table class="layui-hide" id="test" lay-filter="test"></table>
<!--            数据表格中的两个编辑删除按钮-->
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

            <!--新增会员模态框-->
            <script type="text/html" id="insert_form">

                <div class=" layui-form-pane layui-field-box" action="">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">会员名称</label>
                        <div class="layui-input-block">
                            <input type="text" id="insertmemberName" name="title" required  lay-verify="required" placeholder="请输入会员名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">会员号码</label>
                        <div class="layui-input-block">
                            <input type="text" id="insertmemberPhone" name="phone" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">会员密码</label>
                        <div class="layui-input-inline">
                            <input style="width: 360px" type="password" id="insertmemberPass" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>



                </div>
            </script>

            <!--修改会员模态框-->
            <script type="text/html" id="update_form">
                <div class="layui-field-box">

                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">会员名称</label>
                        <div class="layui-input-inline">
                            <input style="width: 360px" type="text" id="updatememberName" class="layui-input" placeholder="请输入新名称">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-inline">
                            <input style="width: 360px" type="password" id="updatememberPass" class="layui-input" placeholder="请输入新密码">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-pane" style="display: flex">
                        <label class="layui-form-label">会员等级</label>
                        <select name="dp1" id="updategrade" lay-verify="required" lay-filter="Filter" class="layui-input-inline layui-input" style="width: 360px;">
                            <option value="">请选择</option>
                            <option value="普通会员">普通会员</option>
                            <option value="铜牌会员">铜牌会员</option>
                            <option value="至尊会员">至尊会员</option>
                        </select>
                    </div>
                </div>
            </script>



        </div>

<script src="layui/layui.js" ></script>
<script src="jquery/jquery-3.6.0.js" ></script>
<script>
    let username = sessionStorage.getItem("username");

    $("#header_username").text(username);

    //新增会员点击事件
    $("#insertMember").click(function (){
        layer.open({     // 弹出框处理  模态框
            type: 1               // 模态框
            ,title: '新增会员' //不显示标题栏
            ,closeBtn: false
            ,area: ['500px','350px']  // 宽和高
            ,shade: 0.5
            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,btn: ['新增', '取消']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,content: $('#insert_form').html()         // 引入自定义表单
            ,btn1: function(index, layero){            // 这个是新增按钮点击事件
                // layer.msg("新增按钮执行");
                let memberName = $("#insertmemberName").val();
                let memberPhone = $("#insertmemberPhone").val();
                let memberPass = $("#insertmemberPass").val();
                $.ajax({
                    url:"/member/insertMember",           // 请求路径
                    type:"post",                  // 请求的方式，不区分大小写
                    cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                    contentType:"application/json;charset=utf-8",
                    data: JSON.stringify({
                        memberName:memberName,
                        memberPhone:memberPhone,
                        memberPass:memberPass
                    }),
                    datatype:"json",        // 返回类型，text文本、html页面、json数据
                    success:function(response){
                        console.log("返回: " + response);
                        if(response.code === 200) {
                            layer.msg("新增会员成功!");
                            layer.close(index);                         // 关闭当前窗口
                            tableFlush();
                        }
                    },
                    error:function(response){
                        console.log("出错返回: " + response);
                    }
                });
            }
            ,success: function(layero){

            }
        });
    });

    //重置按钮点击事件
    $("#iReset").click(function () {
        $("#search_member_ID").val("");
        $("#search_member_phone").val("");
        $("#search_member_name").val("");
        $("#search_member_grade").val("");
        $("#search_member_status").val("");
        tableFlush();
    });

    //搜索按钮点击事件
    $("#searchVal").click(function () {
        let memberId = $("#search_member_ID").val();
        let memberPhone = $("#search_member_phone").val();
        let memberName = $("#search_member_name").val();
        let grade = $("#search_member_grade option:selected").val();
        let memberStatus = $("#search_member_status option:selected").val();
        let whereJSON = {};
        if(memberId != null && memberId != '') {
            whereJSON.memberId = memberId;
        }
        if(memberPhone != null && memberPhone != '') {
            whereJSON.memberPhone = memberPhone;
        }
        if(memberName != null && memberName != '') {
            whereJSON.memberName = memberName;
        }
        if(grade != null && grade != '') {
            whereJSON.grade = grade;
        }
        if(memberStatus == 0 || memberStatus == 1) {
            whereJSON.memberStatus = memberStatus;
        }
        tableFlush(whereJSON);
    });

    function tableFlush(whereJSON) {
        layui.use(['table','form','element'], function(){
            var table = layui.table;
            var form = layui.form;
            //  render  渲染
            table.render({
                elem: '#test'
                ,skin:'line'
                ,size:'lg'
                ,url:'/member/selectMemberByPage'
                ,where:whereJSON
                //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: '会员数据表'
                ,cols: [[
                    {title:'会员ID',  fixed: 'left',width:75, unresize: true, align:'center',templet: function(res){
                            return '<em>'+ res.memberId +'</em>'
                        }}
                    ,{width:70,title: '头像',unresize: true,align:'center',templet:function(res){
                             return '<img style="text-align:center;height:40px;width:40px;border-radius:50%;" src=img/carousel/'+res.memberPic+'/>';
                        }}
                    ,{title:'名称', width:80, unresize: true,align:'center', templet: function(res){
                            return '<em>'+ res.memberName +'</em>'
                        }}
                    ,{title:'手机号', width:120, unresize: true, align:'center',templet: function(res){
                            return '<em>'+ res.memberPhone +'</em>'
                        }}
                    ,{title:'密码', width:180,align:'center', templet: function(res){
                            return '<em>'+ res.memberPass +'</em>'
                        }}
                    ,{title:'会员等级', width:90, unresize: true, align:'center',templet: function(res){
                            return '<em>'+ res.grade +'</em>'
                        }}
                    ,{title:'更新时间', width:160,align:'center', templet: function(res){
                            return '<em>'+ res.memberCreateTime +'</em>'
                        }}
                    ,{field: 'state', title: '状态', width: 80,unresize: true,align:'center', templet: function (res) {
                            if (res.memberStatus == 1) {
                                return '<div> <input type="checkbox" checked="" name="codeSwitch" lay-skin="switch"  lay-filter="switchTest" switchId=' + res.memberId + '' +
                                    '   value=' + res.memberStatus + '></div>';
                            }
                            return '<div> <input type="checkbox"  name="codeSwitch" lay-skin="switch"  lay-filter="switchTest" switchId=' + res.memberId + '' +
                                '   value=' + res.memberStatus + '></div>';

                        }
                    }
                    ,{fixed: 'right', title:'操作',align:'center', toolbar: '#barDemo', width:120}
                ]]
                ,page: true
            });

            //头工具栏事件


            //监听行工具事件，包括编辑按钮和删除按钮
            table.on('tool(test)', function(obj){
                var data = obj.data;
                console.log(data)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            url:"/member/deleteBymemberId",           // 请求路径
                            type:"post",                  // 请求的方式，不区分大小写
                            cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                            data: {
                                memberId:data.memberId
                            },
                            datatype:"json",        // 返回类型，text文本、html页面、json数据
                            success:function(response){
                                console.log("返回: " + response);
                                if(response.code === 200) {
                                    layer.msg("删除会员成功!");
                                    layer.close(index);                         // 关闭当前窗口
                                    tableFlush();
                                }
                            },
                            error:function(response){
                                console.log("出错返回: " + response);
                            }
                        });
                    });
                } else if(obj.event === 'edit'){
                    layer.open({     // 弹出框处理  模态框
                        type: 1               // 模态框
                        , title: '更新会员信息' //不显示标题栏
                        , closeBtn: false
                        , area: ['500px', '350px']  // 宽和高
                        , shade: 0.5
                        , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        , btn: ['更新', '取消']
                        , btnAlign: 'c'
                        , moveType: 1 //拖拽模式，0或者1
                        , content: $('#update_form').html()         // 引入自定义表单
                        , btn1: function (index, layero) {            // 这个是新增按钮点击事件
                            // layer.msg("新增按钮执行");
                            let memberId = data.memberId;
                            let memberName = $("#updatememberName").val();
                            let memberPass = $("#updatememberPass").val();
                            let grade = $("#updategrade option:selected").val();
                            $.ajax({
                                url: "/member/updateBymemberId",           // 请求路径
                                type: "post",                  // 请求的方式，不区分大小写
                                cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                                contentType: "application/json;charset=utf-8",
                                data: JSON.stringify({
                                    memberId:memberId,
                                    memberName:memberName,
                                    memberPass:memberPass,
                                    grade:grade
                                }),
                                datatype: "json",        // 返回类型，text文本、html页面、json数据
                                success: function (response) {
                                    console.log("返回: " + response);
                                    if (response.code === 200) {
                                        layer.msg("更新用户成功!");
                                        layer.close(index);                         // 关闭当前窗口
                                        tableFlush();
                                    }
                                },
                                error: function (response) {
                                    console.log("出错返回: " + response);
                                }
                            });
                        }
                        , success: function (layero) {

                        }
                    });
                }
            });

            //监听switch开关状态
            form.on('switch(switchTest)', function (data) {
                let memberId = data.elem.attributes['switchId'].nodeValue
                let memberStatus = data.elem.checked?"1":"0"
                $.ajax({
                    url: '/member/updateSwitch',
                    data: JSON.stringify({
                        memberStatus: memberStatus,
                        memberId: memberId
                    }),
                    type: 'post', //HTTP请求类型
                    contentType:"application/json;charset=utf-8",
                    success: function (response) {
                        console.log("返回: " + response);
                        if (response.code === 200) {
                            layer.msg("更新用户成功!");
                            layer.close(index);                         // 关闭当前窗口
                            tableFlush();
                        }
                    },
                    error: function (response) {
                        console.log("出错返回: " + response);
                    }

                })
                layer.close(layerIndex);

            });

            form.render();

        });

    }

    tableFlush();
</script>

<script>
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,title: '更多'
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                    ,scrollbar: false
                });
            }
        });

    });
</script>
        <style>
            .layui-breadcrumb a {
                color: black !important;
            }
            .layui-breadcrumb{
                padding: 10px;
            }
        </style>
</body>
</html>
